<template>
  <view class="container">

    <!-- 单个音频播放器 -->
    <view class="audio-player-container">
      <view class="audio-player">
        <!-- 音频信息 -->
        <view class="audio-header">
			<view class="" style="display: flex;justify-content: flex-start;align-items: center;flex: 4;">
				<view class="audio-title">{{ newdata.name }}</view>
				<image src="/static/images/rename.png" style="width: 32rpx;height: 32rpx;margin-left: 10rpx;" @click="rename"></image>
			</view>
			<view class="record-time">{{ newdata.recordTime || '录制时间' }}</view>
        </view>
		<view class="time-display">
		  时间：{{ formatTime(newdata.currentTime) }} / {{ formatTime(newdata.duration) }}
		</view>
		<!-- <view class="" style="height: 10rpx;"></view> -->
        <!-- 进度条 -->
   <!--     <view class="progress-bar-container" @touchstart="handleProgressTouchStart" @touchmove="handleProgressTouchMove"
          @touchend="handleProgressTouchEnd">
          <view class="progress-bar">
            <view class="progress-track"></view>
            <view class="progress" :style="{ width: newdata.progress + '%' }">
              <view class="progress-loading" v-show="newdata.isLoading"
                :style="{ width: newdata.loadingProgress + '%' }">
              </view>
            </view>
            <view class="progress-indicator" :style="{ left: newdata.progress + '%' }"></view>
          </view>
          <text class="time-display">
            时间：{{ formatTime(newdata.currentTime) }} / {{ formatTime(newdata.duration) }}
          </text>
        </view> -->
		
	
		
		<slider
			:block-size="16"
			:value="newdata.progress" 
			@change="handleProgressChange" 
			@touchstart="handleProgressTouchStart" 
			@touchmove="handleProgressTouchMove"
			@touchend="handleProgressTouchEnd"
			min="0" max="100"
			activeColor="#FF4949" 
			backgroundColor="#eee"
		/>
		
        <!-- 控制按钮 - 全部改为图片占位 -->
        <view class="control-buttons">
          <!-- 倍速控制 -->
         <!-- <picker mode="selector" :range="speedOptions" :value="newdata.speedIndex" @change="handleSpeedChange"
            class="speed-control">
            <view class="speed-text">
              {{ newdata.speed }}X
              <uni-icons type="arrowdown" size="20" color="#666"></uni-icons>
            </view>
          </picker> -->
		  <image src="/static/images/convert_text.png" style="width: 56rpx;height: 56rpx;" mode="" @click="handleVoiceText"></image>

          <!-- 快退 -->
          <view class="control-btn" @click.stop="skipBackward">
            <image src="/static/images/后退15s.png" class="control-icon" />
          </view>

          <!-- 播放/暂停 -->
          <view class="play-btn" @click.stop="togglePlayPause">
            <image :src="newdata.isPlaying ? '/static/images/pause.png' : '/static/images/play.png'"
              class="play-icon" />
          </view>

          <!-- 快进 -->
          <view class="control-btn" @click.stop="skipForward">
            <image src="/static/images/快进15s.png" class="control-icon" />
          </view>

          <!-- 删除 -->
          <view class="control-btn delete-btn" @click.stop="deleteAudio">
            <image src="/static/images/delete.png" class="control-icon" />
          </view>
        </view>
      </view>
    </view>

 <!-- 功能操作 -->
 <!--   <view class="action-bar">
		<button class="action-btn" @click="handleVoiceText">
		  <text>语音转文字</text>
		</button>
      <button class="action-btn" @click="rename">
        <text>重命名</text>
      </button>
    </view> -->
	<view class="" style="display: flex;flex-direction:column;align-items: center;justify-content: center;margin-top: 100rpx;" v-if="!isShow">
		
		<image src="/static/images/null.png" style="width: 400rpx;height:300rpx;" ></image>
		<view class="" style="color: #999;margin-top: 20rpx;">
			点击顶部音频播放左下角生成文字
		</view>
	</view>
	<view class="container" v-else>
		
		<view class="card">
		  <view class="card-header">智能摘要</view>
		  <view class="card-content">
		    <text class="text-content">{{ convertTextValue.abstracts || '生成摘要中...' }}</text>
		  </view>
		</view>
	  <view class="card">
	    <view class="card-header">语音转文字</view>
	    <view class="card-content">
	      <text class="text-content" v-for="(item,index) in convertTextValue.text" :key="index">{{ item + '\n' || '正在转换中...' }}</text>
	    </view>
	  </view>
	
	  <view class="card">
	    <view class="card-header">AI分析</view>
	    <view class="card-content">
	
	      <!-- <image :src="'data:image/png;base64,' + convertTextValue.emotion" mode="aspectFit" class="text-ai"></image> -->
		   <view class="charts-box">
		      <qiun-data-charts 
		        type="pie"
		        :opts="opts"
		        :chartData="chartData"
		      />
		    </view>
	    </view>
	  </view>
	</view>
  </view>
</template>

<script setup>
import { ref, onUnmounted, nextTick } from 'vue';
import { onLoad ,onUnload} from '@dcloudio/uni-app';
import { putUpdate, findFileById } from '@/api/common.js';

const data = ref({});
const newdata = ref({
  // isPlaying: false,
  // currentTime: 0,
  // duration: 0,
  // progress: 0,
  // speed: 1.0,
  // speedIndex: 1,
  // isDragging: false,
  // isLoading: false,
  // loadingProgress: 0
});
const audioCtx = ref(null);

const chartData = ref({});

const convertTextValue = ref({})
const isShow = ref(false);

const activeIndex = ref(-1);
const audioList = ref([]);
// let audioCtx.value = null;
let currentItemIndex = -1;
let isDragging = false; // 拖动状态标记

// onUnload(() => {
// 	 if (audioCtx) {
// 	    audioCtx.pause();
// 	  }
// })

// 进度条值改变事件（保留用于键盘或鼠标拖动）
const handleProgressChange = (e) => {
  if (isDragging) return; // 避免触摸和值改变事件冲突
  // const item = audioList.value[index];
  // if (currentItemIndex === index && item.duration && audioCtx.value) {
	  
    const percent = Math.max(0, Math.min(100, e.detail.value));
    const newTime = (percent / 100) * newdata.value.duration;
    audioCtx.value.seek(newTime);
  // }
};
// 进度条触摸开始
const handleProgressTouchStart = () => {
  isDragging = true;
  // const item = audioList.value[index];
  // if (currentItemIndex === index && audioCtx.value) {
    audioCtx.value.pause(); // 拖动时暂停播放，提升体验
  // }
};

// 进度条触摸移动
const handleProgressTouchMove = (e) => {
  if (!isDragging) return;
  // const item = audioList.value[index];
  // if (currentItemIndex === index && item.duration) {
    const percent = Math.max(0, Math.min(100, e.detail.value));
    newdata.value.progress = percent; // 实时更新进度显示
    const newTime = (percent / 100) * newdata.value.duration;
    audioCtx.value?.seek(newTime); // 安全调用
  // }
};

// 进度条触摸结束
const handleProgressTouchEnd = () => {
  isDragging = false;
  // const item = audioList.value[index];
  // if (currentItemIndex === index && audioCtx.value) {
    audioCtx.value.play(); // 恢复播放
  // }
};

// 进度条值改变事件（保留用于键盘或鼠标拖动）
// const handleProgressChange = (e) => {
//   if (isDragging) return; // 避免触摸和值改变事件冲突
//   // const item = audioList.value[index];
//   // if (currentItemIndex === index && item.duration && audioCtx.value) {
//     const percent = Math.max(0, Math.min(100, e.detail.value));
//     const newTime = (percent / 100) * newdata.value.duration;
//     audioCtx.value.seek(newTime);
//   // }
// };

const handleEcharts = (echartData) => {
	 let opts = {
	        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
	        padding: [5,5,5,5],
	        enableScroll: false,
	        extra: {
	          pie: {
	            activeOpacity: 0.5,
	            activeRadius: 10,
	            offsetAngle: 0,
	            labelWidth: 15,
	            border: true,
	            borderWidth: 3,
	            borderColor: "#FFFFFF",
	            linearType: "custom"
	          }
	        }
			}
			setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					series: [
					  {
						data: echartData
					  }
					]
				  };
				chartData.value = JSON.parse(JSON.stringify(res));
			  }, 500);
}

// 创建音频上下文
const createAudioContext = () => {
  if (audioCtx.value) {
    removeAudioListeners(audioCtx.value);
    audioCtx.value.destroy();
  }

  audioCtx.value = uni.createInnerAudioContext();
  console.log('创建音频上下文成功');

  // 设置默认播放速率
  audioCtx.value.playbackRate = newdata.value.speed;
  console.log(`设置默认播放速率: ${newdata.value.speed}X`);
};

// 获取音频详情
const getfindFileById = () => {
  findFileById(data.value.id).then(res => {
    if (res.code === 200) {
      newdata.value = {
        ...res.data[0],
        ...newdata.value,
        progress: 0,
        currentTime: 0,
        isPlaying: false,
        isDragging: false,
        isLoading: false,
        loadingProgress: 0
      };

      // 创建音频上下文
      createAudioContext();
	  handleVoiceText()
    } else {
      uni.showToast({
        title: '获取音频信息失败',
        icon: 'none'
      });
    }
  }).catch(err => {
    console.error('获取音频信息失败:', err);
  });
};

// 新增参数接收逻辑
onLoad((options) => {
	newdata.value = JSON.parse(options.dataValue)
	console.log("newdata.value", newdata.value)
	isShow.value = false;
  if (options.params) {
    try {
      const params = JSON.parse(decodeURIComponent(options.params));
      data.value = {
        ...data.value,
        ...params,
        id: params.id || '',
      };

      console.log('接收到的参数:', data.value);
      getfindFileById();
    } catch (e) {
      console.error('参数解析失败:', e);
    }
  }
});

// 重命名功能
const rename = () => {
  uni.showModal({
    title: '重命名',
    editable: true,
    placeholderText: newdata.value.name,
    success: async (res) => {
      if (res.confirm && res.content.trim()) {
        try {
          uni.showLoading({ title: '保存中...' });

          // 调用更新接口
          const response = await putUpdate({
            id: data.value.id,
            name: res.content.trim()
          });

          if (response.code === 200) {
            newdata.value.name = res.content.trim();
            uni.showToast({ title: '重命名成功', icon: 'success' });
          } else {
            throw new Error(response.msg || '更新失败');
          }
        } catch (err) {
          console.error('重命名失败:', err);
          uni.showToast({
            title: `重命名失败: ${err.message}`,
            icon: 'none'
          });
        } finally {
          uni.hideLoading();
        }
      }
    }
  });
};

// 倍速选项
const speedOptions = ref(['0.5X', '1.0X', '1.5X', '2.0X']);
const speedValues = ref([0.5, 1, 1.5, 2]);

// 格式化时间
const formatTime = (seconds) => {
  if (!seconds || isNaN(seconds)) return '00:00';
  const minutes = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};

// 触摸开始处理
// const handleProgressTouchStart = (event) => {
//   newdata.value.isDragging = true;

//   if (newdata.value.isPlaying) {
//     audioCtx.value.pause();
//   }

//   const rect = event.currentTarget.getBoundingClientRect();
//   const touch = event.touches[0];
//   const x = touch.clientX - rect.left;
//   updateProgress(x / rect.width * 100);
// };

// 触摸移动处理
// const handleProgressTouchMove = (event) => {
//   if (!newdata.value.isDragging) return;

//   const rect = event.currentTarget.getBoundingClientRect();
//   const touch = event.touches[0];
//   let x = touch.clientX - rect.left;
//   x = Math.max(0, Math.min(x, rect.width));
//   const progress = (x / rect.width) * 100;
//   updateProgress(progress);
// };

// // 触摸结束处理
// const handleProgressTouchEnd = () => {
//   newdata.value.isDragging = false;

//   if (newdata.value.duration) {
//     const seekTime = (newdata.value.progress / 100) * newdata.value.duration;
//     newdata.value.currentTime = seekTime;

//     if (audioCtx.value) {
//       audioCtx.value.seek(seekTime);
//       if (newdata.value.isPlaying) {
//         audioCtx.value.play();
//       }
//     }
//   }
// };

// 更新进度条
// const updateProgress = (progress) => {
//   const safeProgress = Math.max(0, Math.min(progress, 100));
//   newdata.value.progress = safeProgress;

//   if (newdata.value.duration) {
//     newdata.value.currentTime = (safeProgress / 100) * newdata.value.duration;
//   }
// };

// 移除音频事件监听
const removeAudioListeners = (ctx) => {
  ctx.offTimeUpdate();
  ctx.offEnded();
  ctx.offError();
  ctx.offCanplay();
};

// 倍速变化处理
const handleSpeedChange = (event) => {
  const speedIndex = Number(event.detail.value);
  const speed = speedValues.value[speedIndex];

  console.log(`切换到 ${speed}X 倍速`);

  newdata.value.speed = speed;
  newdata.value.speedIndex = speedIndex;

  if (audioCtx.value) {
    audioCtx.value.playbackRate = speed;

    // 重新加载并应用新的播放速率
    if (newdata.value.isPlaying) {
      // 暂停并重新播放以确保倍速生效
      audioCtx.value.pause();
      audioCtx.value.play();
    }
  }
};

// 播放/暂停控制 - 改进了事件监听的处理
const togglePlayPause = () => {
  newdata.value.isPlaying = !newdata.value.isPlaying;

  if (!audioCtx.value) {
    console.error('音频上下文未初始化');
    newdata.value.isPlaying = false;
    return;
  }

  if (newdata.value.isPlaying) {
    // 检查URL有效性
    if (!newdata.value.url) {
      uni.showToast({ title: '音频地址无效', icon: 'none' });
      newdata.value.isPlaying = false;
      return;
    }

    newdata.value.isLoading = true;
    audioCtx.value.src = newdata.value.url;

    // 设置当前播放速率
    audioCtx.value.playbackRate = newdata.value.speed;

    // 移除旧事件监听
    removeAudioListeners(audioCtx.value);

    // 设置src后再绑定事件
    // 监听播放进度
    audioCtx.value.onTimeUpdate(() => {
      if (!newdata.value.isDragging) {
        newdata.value.currentTime = audioCtx.value.currentTime;
        newdata.value.progress = (newdata.value.currentTime / newdata.value.duration) * 100;
      }
    });

    // 监听播放结束
    audioCtx.value.onEnded(() => {
      newdata.value.isPlaying = false;
      newdata.value.currentTime = 0;
      newdata.value.progress = 0;
    });

    // 监听加载完成
    audioCtx.value.onCanplay(() => {
      newdata.value.isLoading = false;
      newdata.value.loadingProgress = 100;

      // 获取音频时长
      nextTick(() => {
        newdata.value.duration = audioCtx.value.duration || newdata.value.duration;
        if (!newdata.value.duration) {
          console.warn('无法获取音频时长，使用默认值');
          newdata.value.duration = 60; // 默认60秒
        }
      });
    });

    // 监听错误
    audioCtx.value.onError((err) => {
      console.error('音频错误:', err);
      newdata.value.isPlaying = false;
      newdata.value.isLoading = false;
      uni.showToast({
        title: '音频加载失败，请检查网络',
        icon: 'none'
      });
    });

    // 执行播放
    audioCtx.value.play();
  } else {
    audioCtx.value.pause();
  }
};

// 快退15秒
const skipBackward = () => {
  if (!newdata.value.duration) return;

  const newTime = Math.max(0, (newdata.value.currentTime || 0) - 15);
  newdata.value.currentTime = newTime;
  newdata.value.progress = (newTime / newdata.value.duration) * 100;

  if (audioCtx.value && newdata.value.isPlaying) {
    audioCtx.value.seek(newTime);
  }
};

// 快进15秒
const skipForward = () => {
  if (!newdata.value.duration) return;

  const newTime = Math.min(newdata.value.duration, (newdata.value.currentTime || 0) + 15);
  newdata.value.currentTime = newTime;
  newdata.value.progress = (newTime / newdata.value.duration) * 100;

  if (audioCtx.value && newdata.value.isPlaying) {
    audioCtx.value.seek(newTime);
  }
};

// 删除音频
const deleteAudio = () => {
  uni.showModal({
    title: '确认删除',
    content: `确定要删除 "${newdata.value.name}" 吗？`,
    success: (res) => {
      if (res.confirm) {
        if (audioCtx.value) {
          removeAudioListeners(audioCtx.value);
          audioCtx.value.destroy();
        }

        // 实际项目中可能需要调用删除接口
        uni.showToast({
          title: '已删除',
          icon: 'success'
        });

        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }
    }
  });
};

// 语音转文字
const handleVoiceText = () => {
	uni.showLoading({
		title:'加载中..'
	})
	setTimeout(() => {
		findFileById(data.value.id).then(res => {
			isShow.value = true;
		  convertTextValue.value = res.data[0];
		  convertTextValue.value.text = JSON.parse(res.data[0]?.text)
		  let dataValue = JSON.parse(res.data[0]?.emotion).map(item => {
			  console.log("item", item)
			  return {
				  name: item.label,
				  value: item.score * 100
			  }
		  })
		  console.log("dataValue", dataValue)
		  handleEcharts(dataValue)
		  // convertTextValue.value.textValue = JSON.parse(res.data[0].text);
		  
		  // console.log("convertTextValue.value.textValue", JSON.parse(res.data[0].text))
		  // console.log("res.data[0].text", JSON.parse(res.data[0].text))
		  uni.hideLoading()
		}).catch(err => {
			isShow.value = false;
			uni.hideLoading()
		  console.error('获取文件信息失败:', err);
		})
	},1000)

  // uni.navigateTo({
  //   url: `/pages/voice_text/voice_text?id=${data.value.id}`
  // });
};

// 页面卸载时清除资源
onUnmounted(() => {
  if (audioCtx.value) {
    removeAudioListeners(audioCtx.value);
    audioCtx.value.destroy();
  }
});
</script>

<style lang="scss" scoped>
.container {
  // padding-top: 80rpx;
  background-color: #f9f9f9;
  // min-height: 100vh;
  // padding-bottom: 120rpx;
}

.audio-player-container {
  padding: 24rpx 32rpx;
  // margin-top: 80rpx;
}

.audio-player {
  background: #ffffff;
  border-radius: 28rpx;
  padding: 36rpx;
  box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 8rpx 32rpx rgba(0, 122, 255, 0.1);
  }
}

.audio-header {
  // width: 100%;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex: 1;
}

.audio-title {
  font-size: 36rpx;
  color: #333;
  font-weight: 500;
  max-width: 70%;
	overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis;//溢出用省略号显示
    display: -webkit-box;
    -webkit-line-clamp: 1;// 超出多少行
    -webkit-box-orient: vertical;
	white-space: normal;

}

.record-time {
	flex: 1;
  font-size: 26rpx;
  color: #999;
  text-align: right;
}

.progress-bar-container {
  width: 100%;
  margin-bottom: 36rpx;
  position: relative;
  cursor: pointer;
}

.progress-bar {
  height: 12rpx;
  background-color: #f0f0f0;
  border-radius: 6rpx;
  overflow: hidden;
  width: 100%;
  position: relative;
}

.progress-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 122, 255, 0.05);
  border-radius: 6rpx;
}

.progress {
  height: 100%;
  background: linear-gradient(90deg, #007AFF 0%, #34AADC 100%);
  transition: width 0.1s linear;
  border-radius: 6rpx;
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-100%);
    animation: shine 2s infinite;
  }
}

@keyframes shine {
  100% {
    transform: translateX(100%);
  }
}

.progress-indicator {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28rpx;
  height: 28rpx;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.4);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;

  &:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6rpx 20rpx rgba(0, 122, 255, 0.5);
  }

  &:active {
    transform: translateY(-50%) scale(0.95);
    box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.6);
  }
}

.time-display {
  // position: absolute;
  // right: 0;
  // top: -36rpx;
  font-size: 24rpx;
  color: #999;
  // display: flex;
  // align-items: center;
}

.control-buttons {
  display: flex;
  gap: 32rpx;
  align-items: center;
  justify-content: center;
}

.control-btn {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: all 0.2s ease;

  &:hover {
    opacity: 1;
    transform: scale(1.08);
  }

  &:active {
    transform: scale(0.95);
  }

  .control-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.speed-control {
  padding: 12rpx 24rpx;
  background-color: #f5f5f5;
  border-radius: 20rpx;
  font-size: 26rpx;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12rpx;
  transition: all 0.2s ease;

  &:hover {
    background-color: #f0f0f0;
  }
}

.play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96rpx;
  height: 96rpx;
  background: linear-gradient(135deg, #007AFF 0%, #34AADC 100%);
  border-radius: 50%;
  box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.3);
  transition: all 0.3s ease;

  .play-icon {
    width: 60rpx;
    height: 60rpx;
    // width: 60%;
    // height: 60%;
    // object-fit: contain;
  }

  &:hover {
    transform: scale(1.05);
    box-shadow: 0 10rpx 28rpx rgba(0, 122, 255, 0.4);
  }

  &:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.5);
  }
}

.delete-btn {
  &:hover {
    background-color: rgba(255, 59, 48, 0.1);
  }
}



.action-bar {
  margin: 24rpx 32rpx;
  margin-top: 0;
  // padding: 24rpx 32rpx;
  // width: 700rpx;
  border-radius: 25rpx;
  // background: white;
  display: flex;
  justify-content: space-around;
  // padding: 20rpx 0;
  // box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);

  .action-btn {
    flex: 1;
    margin: 0 20rpx;
    // background: #007aff;
    color: #666;
    border-radius: 40rpx;
    font-size: 30rpx;
    padding: 20rpx 0;
    border: none;
  }
  .action-btn::after {
	  border: none;
  }
  
}

.text-ai {
  height: 300px;
  width: 100%;
}

.container {
  padding: 24rpx;
  background-color: #f8f8f8;
  // min-height: 100vh;
}

.card {
  background: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  &-header {
    padding: 28rpx;
    font-size: 34rpx;
    color: #333;
    border-bottom: 1rpx solid #eeeeee;
    font-weight: 500;
  }

  &-content {
    padding: 28rpx;
    min-height: 200rpx;
  }
}


 .charts-box {
    width: 100%;
    height: 300px;
  }
  
  /* 修改 slider 组件的高度（uni-app 中需使用深度选择器） */
  :deep(.uni-slider-handle-wrapper) {
    height: 8rpx; /* 示例高度，可根据需求调整（rpx 为响应式单位） */
  }
  :deep(uni-slider) {
	  margin-left: 0;
	  margin-right: 0;
  }
</style>